<template>
  <van-cell-group v-if="viewLoading">
    <van-cell title="预约币余额" :value="models.user_wallet.appointment" />

    <van-field class="van-cell--center" type="number" placeholder="请输入账号" name="to_account" required
      label="转到账号" v-model="formFields.to_account"
      v-on:input="inputFindFirstByAccount"
      :error="$validator.errors.has('to_account')" :error-message="$validator.errors.first('to_account')"
      data-vv-as="账号" v-validate="{required: true, min: 6, max: 6}"
    />

    <van-field disabled required label="名称" v-model="toName"/>

    <van-field class="van-cell--center" type="number" placeholder="请输入数量" name="amount" required
      label="数量" v-model="formFields.amount"
      :error="$validator.errors.has('amount')" :error-message="$validator.errors.first('amount')"
      data-vv-as="数量" v-validate="{required: true, min_value: 1, max_value: models.user_wallet.appointment}"
    />

    <van-field class="van-cell--center" type="password" placeholder="请输入安全密码" name="safe_password" required
      label="安全密码" v-model="formFields.safe_password"
      :error="errors.has('safe_password')" :error-message="errors.first('safe_password')"
      data-vv-as="安全密码" v-validate="{required: true, min: 6}"
    />

    <van-button size="small" type="primary" :loading="onButtonLoading" @click="onSubmit" style="width: 100%;">转账</van-button>
  </van-cell-group>
</template>

<script>
  import { Button, Cell, CellGroup, Field, Toast } from 'vant';
  import { Validator } from 'vee-validate';
  import { mapState } from 'vuex';
  import userApi from '@/api/user/index';

  export default {
    components: {
      [Button.name]: Button,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Field.name]: Field
    },
    data() {
      return {
        onButtonLoading: false,
        toName: '',
        formFields: {
          to_account: '',
          amount: '',
          safe_password: ''
        },
        viewLoading: false
      };
    },
    methods: {
      inputFindFirstByAccount() {
        console.log(this.formFields.to_account.replace(/[\u0391-\uFFE5]/g, 'aa').length);
        if(this.formFields.to_account.replace(/[\u0391-\uFFE5]/g, 'aa').length < 6) { return false; }

        if (this.formFields.to_account !== null && this.formFields.to_account !== undefined && this.formFields.to_account !== '') {
          userApi.findFirstByAccount(this.formFields.to_account).then((data) => {
            if(data.code.toString() !== '0') {
              this.toName = data.msg;
              return false;
            }

            this.toName = data.user.name;
            return true;
          })
        }
      },
      onSubmit() {
        this.onButtonLoading = true;
        if(this.formFields.to_account === this.models.user.account) {
          Toast('不能转账给自己');
          this.onButtonLoading = false;
          return false;
        }

        this.$validator.validateAll().then((isValid) => {
          if(isValid) {
            this.$store.dispatch('user/userWalletAppointmentTransferByToken', this.formFields).then((res) => {
              Toast(res.msg);
              this.onButtonLoading = false;
              if(res.code !== 0) {
                return false;
              }
              this.formFields.to_account = '';
              this.formFields.amount = '';
              this.formFields.safe_password = '';
              return true;
            }).catch((err) => { this.onButtonLoading = false; });
          } else {
            Toast('请输入必要栏目');
            this.onButtonLoading = false;
          }

          return false;
        });
      }
    },
    computed: mapState({
      models: state => state.user
    }),
    created() {
      this.$store.dispatch('user/findFirstByTokenIsEmpty').then((res) => {
        this.viewLoading = true;
        if(res.code != 0) {
          Toast(res.msg);
          return false;
        }
      }).catch((err) => {
        this.viewLoading = true;
      });
    }
  }
</script>
